<template>
  <div>
    <!-- <el-button type="primary" plain @click="$refs.JsonDialog.open()">编辑数据</el-button> -->
    <el-button type="text" size="mini" @click="$refs.JsonDialog.open()">
      <el-tooltip content="点击此处导入JSON数据生成表单" placement="top">
        <i class="el-icon-download" style="font-size:14px"></i>
      </el-tooltip>
    </el-button>
    <JsonDialog ref="JsonDialog" :modelValue="modelValue" @confirm="onConfirm" />
  </div>
</template>

<script>
import JsonDialog from "@/components/editor/JsonDialog";
import { deepClone } from "../utils";

export default {
  props: {
    modelValue: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    JsonDialog,
  },

  methods: {
    onConfirm(modelValue) {
      const formAttrs = deepClone(modelValue);
      delete formAttrs.list;
      const formList = modelValue.list;
      this.$emit("confirm", formAttrs, formList);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>